<template>
	<view class="content">
		<u-navbar title="" @rightClick="rightClick" :autoBack="true" bgColor="transparent" leftIconColor="#fff"
			leftIconSize="40rpx">
		</u-navbar>
		<view class="box">
			<view class="tit">
				账号密码登陆
			</view>

			<form action="">
				<view class="item">
					<view class="ll">
						+86
					</view>
					<input class="input" type="text" v-model="loginInfo.phone" placeholder="请输入手机" />
				</view>
				<view class="item">
					<input class="input" type="password" v-model="loginInfo.password" placeholder="请输入密码" />

				</view>

				<button class="button" @tap="submit">登陆</button>
			</form>
		</view>

		<view class="agree">
			注册代表您同意 xxxxx某某协议
		</view>
	</view>
</template>

<script>
	import api from '../../../utils/api.js'
	export default {

		mounted() {
			// 添加触摸移动事件监听器
			this.$el.addEventListener('touchmove', this.handleTouchMove, {
				passive: false
			});
		},
		data() {
			return {
				loginInfo: {
					phone: "",
					password: ""
				}


			}
		},

		methods: {
			handleTouchMove(event) {
				event.preventDefault(); // 阻止默认的滚动行为
			},
			send() {
				uni.showToast({
					title: "发送验证码"
				})
			},
			submit() {


				api.passwordLogin(this.loginInfo).then((res) => {
					uni.showToast({
						title: "登陆成功",
						icon: "none"
					})
					if (res.success) {
						uni.setStorageSync('token', res.message)
						const token = uni.getStorageSync('token');
						console.log(token)
						uni.switchTab({
							url: "/pages/Home/Home"
						})
					}

				})
				// uni.request({
				// 	url: 'http://localhost:8088/login/pwd',
				// 	data: {phone: this.phone,password:this.password},
				// 	method: 'post',
				// 	success: (res) => {
				// 		console.log(res)
				// 		let data = res.data;
				// 		if(data.success){
				// 			localStorage.setItem("token", JSON.stringify(data.message));
				// 			uni.switchTab({
				// 				url:"/pages/Home/Home"
				// 			})
				// 		}


				// 	},
				// 	fail: () => {
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: '网络异常,请稍后重试'
				// 		});
				// 	}
				// });



			}
		}
	}
</script>

<style scoped>
	.content {

		height: 100vh;
		overflow: hidden;
		/* 禁止滚动 */
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("https://img1.baidu.com/it/u=1172319054,1238102685&fm=253&fmt=auto&app=138&f=JPEG?w=266&h=400") no-repeat;
		background-size: cover;
	}

	.box {
		position: fixed;
		top: 38%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
	}

	.tit {
		font-size: 70rpx;
		color: #fff;
		font-weight: 666;
		letter-spacing: 5rpx;
		padding: 10rpx;
		margin-bottom: 60rpx;
	}

	.desc {
		margin-top: 15rpx;
		font-size: 30rpx;
		color: #e5e5e5;
		margin-bottom: 50rpx;
		padding: 10rpx;
	}

	.item {
		margin-bottom: 50rpx;
		border-radius: 50rpx;
		padding: 5rpx 30rpx;
		height: 100rpx;
		background-color: rgba(109, 109, 109, 0.5);
		display: flex;
		align-items: center;
	}

	.ll {
		margin-right: 20rpx;
		color: #fff;
		font-weight: 600;
	}

	.input {
		width: 75%;
		color: #fff;
		font-size: 32rpx;
	}

	.rr {
		width: 25%;
		font-size: 28rpx;
		color: #fff;
	}

	::placeholder {
		color: #d1d1d1;
	}

	.button {
		border-radius: 50rpx;
		background-color: #ffffff;
		color: #000000;
	}

	.agree {
		position: fixed;
		bottom: 230rpx;
		left: 0;
		text-align: center;
		width: 100%;
		color: #b6b6b6;
		font-size: 30rpx;
	}
</style>